<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登入与安全</title>
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/mi/css/persional_center/personal_login.css">
    <link rel="stylesheet" href="/mi/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="/mi/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
    <div class="overall">
        <div class="mi-header">
            <div class="title">
                <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
                <h3>小米账户</h3>
            </div>
            <div class="mi-last">
                <div class="last-one">
                    <a href="">用户协议</a>
                </div>
                <div class="last-one">
                    <a href="">隐私政策</a>
                </div>
                <div class="last-one">
                    <a href="">帮助中心</a>
                </div>
                <div class="last-two"></div>
                <div class="last-three">
                    <a href="">中文(简体)<i class="iconfont">&#xe68a;</i></a>
                </div>
                <div class="last-four">
                    <a href="">退出</a>
                </div>
            </div>
        </div>
        <div class="nav">
            <div class="nav-header">
                <div class="header-one">
                    <img src="${newUser.userImg}" alt="">
                    <div class="header-two">${newUser.userName}</div>
                    <div class="header-three">+86 ${newUser.userTelephone}</div>
                </div>
                <ul class="nav-ul">
                    <li class="nav-li">登入与安全</li>
                    <li class="nav-li">个人信息</li>
                    <li class="nav-li">隐私中心</li>
                    <li class="nav-li">绑定授权</li>
                    <li class="nav-li">帮助中心</li>
                </ul>
            </div>
            <div class="nav-middler">
                <div class="middler-one">
                    <div class="s"></div>
                    <span>登录方式</span>
                </div>
                <div class="middler-two">
                    <div class="middler-three">
                        <img src="" alt="">
                        <div class="middler-four">
                            <div class="middler-five" data-toggle="modal" data-target="#exampleModal" style="cursor:pointer">安全手机</div>
                            <div class="middler-six">+86 ${newUser.userTelephone}</div>
                            <div class="middler-seven"></div>
                        </div>
                    </div>
                    <div class="middler-three">
                        <img src="" alt="">
                        <div class="middler-four">
                            <div class="middler-five" data-toggle="modal" data-target="#exampleModal2" style="cursor:pointer">安全邮箱</div>
                            <div class="middler-nice asd" style="cursor:pointer">${newUser.userEmail}</div>
                            <div class="middler-seven"></div>
                        </div>
                    </div>
                    <div class="middler-three">
                        <img src="" alt="">
                        <div class="middler-four">
                            <div class="middler-five" data-toggle="modal" data-target="#exampleModal3" style="cursor:pointer">修改密码</div>
                            <div class="middler-six" style="cursor:pointer"></div>
                            <div class="middler-seven"></div>
                        </div>
                    </div>
                    <div class="middler-three">
                        <img src="" alt="">
                        <div class="middler-four">
                            <div class="middler-five" style="cursor:pointer">第三方账号</div>
                            <div class="middler-six" style="cursor:pointer"></div>
                            <div class="middler-seven"></div>
                        </div>
                    </div>
                </div>
                <div class="middler-one">
                    <div class="s"></div>
                    <span>账号安全</span>
                </div>
                <div class="middler-last">
                    <div class="middler-three">
                        <img src="" alt="">
                        <div class="middler-four">
                            <div class="middler-five" style="cursor:pointer">密保问题</div>
                            <div class="middler-nice" style="cursor:pointer">未设置</div>
                            <div class="middler-seven"></div>
                        </div>
                    </div>
                    <div class="middler-three">
                        <img src="" alt="">
                        <div class="middler-four">
                            <div class="middler-five" style="cursor:pointer">登录设置管理</div>
                            <div class="middler-nice" style="cursor:pointer"></div>
                            <div class="middler-seven"></div>
                        </div>
                    </div>
                    <div class="middler-three">
                        <img src="" alt="">
                        <div class="middler-four">
                            <div class="middler-five" style="cursor:pointer">登陆二次验证</div>
                            <div class="middler-nice" style="cursor:pointer"></div>
                            <div class="middler-seven"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="floot">
        小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
    </div>
    <div class="ssss"></div>

    <input type="hidden" value="${newUser.userPassword}" id="pasw">
    <input type="hidden" value="${newUser.userId}" id="usi">
    <input type="hidden" value="${newUser.userEmail}" id="uem">
    <input type="hidden" value="${newUser.userTelephone}" id="utp">






    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">更改绑定手机</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label" id="f" data-toggle="popover" data-placement="top"  data-trigger="focus" data-content="密码错误">请输入账户密码:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label" id="f5" data-toggle="popover" data-placement="top"  data-trigger="focus" data-content="新电话号不可相同!">请输入新的手机号:</label>
                            <input class="form-control" id="message-text">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" style="background-color: #f67000" onclick="pho()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel2">更改邮箱</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label" id="f1" data-toggle="popover" data-placement="top"  data-trigger="focus" data-content="密码错误">请输入账户密码:</label>
                            <input type="text" class="form-control" id="recipient-name2">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label" id="f4" data-toggle="popover" data-placement="top"  data-trigger="focus" data-content="新邮箱不可相同!">请输入新的邮箱:</label>
                            <input class="form-control" id="message-text2">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" style="background-color: #f67000" onclick="ema()">确定</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel3">更改密码</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label" id="f2" data-toggle="popover" data-placement="top"  data-trigger="focus" data-content="密码错误">请输入账户密码:</label>
                            <input class="form-control" id="recipient-name3">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label" id="f3" data-toggle="popover" data-placement="top"  data-trigger="focus" data-content="新密码不可相同!">请输入新的账户密码:</label>
                            <input class="form-control" id="message-text3">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" style="background-color: #f67000" onclick="pas()">确定</button>
                </div>
            </div>
        </div>
    </div>


    <script src="/mi/plugins/jquery/jquery.min.js"></script>
    <script src="/mi/plugins/layui-v2.6.8/layui/layui.js"></script>
    <script src="/mi/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/mi/js/personalcenter/personal_login.js"></script>

<script>
    $('#f').popover('hide')
    $('#f1').popover('hide')
    $('#f2').popover('hide')
    $('#f3').popover('hide')
    $('#f4').popover('hide')
    $('#f5').popover('hide')
</script>
</body>
</html>